import React, { PropTypes, PureComponent } from 'react';

import IECharts from '../common/IECharts';


let base = +new Date(2017, 1, 1);
const oneDay = 24 * 3600 * 1000;
const date = [];

const data = [Math.random() * 10];
const data2 = [Math.random() * 10];
const data3 = [];

for (let i = 1; i < 100; i++) {
  const now = new Date(base += oneDay);
  date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
  data.push(Math.round((Math.random() - 0.5) * 10));
  data2.push(Math.round((Math.random() - 0.5) * 10));
  data3[i] = data[i] - data2[i];
}

export default class SimpleLineChart extends PureComponent {
  render() {
    const options = {
      tooltip: {
        trigger: 'axis',
        position(pt) {
          return [pt[0], '10%'];
        },
      },
      title: {
        left: 'center',
        text: '大数据量面积图',
      },
      legend: {
        top: 'bottom',
        data: ['超频', '组合', '基准'],
      },
      xAxis: {
        type: 'category',
        data: date,

        boundaryGap: true,
      },
      yAxis:
      [
        {
          type: 'value',
          boundaryGap: [0, '100%'],
          name: '累计收益率(%)',
          nameLocation: 'middle',
          nameGap: 30,
          min: -30,
          max: 35,
          interval: 5,

        },
        {
          type: 'value',
          boundaryGap: [0, '100%'],
          name: '超频收益率(%)',
          nameLocation: 'middle',
          nameGap: 30,
          min: -55,
          max: 35,
          interval: 5,

        },
      ],
      series: [
        {
          name: '超频',
          type: 'line',
          smooth: true,
          itemStyle: {
            normal: {
              color: 'green',
            },
          },
          data,
        },
        {
          name: '组合',
          type: 'line',
          smooth: true,
          itemStyle: {
            normal: {
              color: 'blue',
            },
          },
          data: data2,
        },
        {
          name: '基准',
          type: 'line',
          smooth: true,
          symbol: 'none',
          sampling: 'average',
          yAxisIndex: 1,
          itemStyle: {
            normal: {
              color: 'gray',
            },
          },
          areaStyle: {
            normal: {
              color: 'gray',
            },
          },
          data: data3,
        },
      ],
    };
    return (
      <IECharts option={options} />
    );
  }
}
